<template>
    <div class='home-container'>
        <SideNav :openeds="openeds" :activeTab="activeTab"></SideNav>
        <div class='right-container'>
            <Header class="header" :headerList="headerList"></Header>
            <div class="right-content white-color">
                <div class="add-title">
                    <img src="../../src/assets/img/welcome/add.png" alt="">
                    <span>新增试卷</span>
                </div>
                <div class="add-form-container">
                    <el-form ref="form" :model="form" label-width="120px" class="add-form addQuestions">
                        <el-row class="sub-name">
                            <el-col :span="16">
                                <el-form-item label="课程名称">
                                    <el-input v-model="form.name" placeholder="请填写题目信息"></el-input>
                                    <a class="link" @click="chooseCourse()">选择课程</a>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7" class="desc">
                                <span>学科: 数学</span>
                                <span>讲师: 王云⼭</span>
                                <span>助教: 李三</span>
                            </el-col>
                        </el-row>
                        <el-row v-for="(item,index) in arr" :key="index">
                            <el-col :span="24">
                                <el-form-item :label="item.title" class="sub">
                                   <div class="content">{{item.content}}</div>
                                   <div class="line2">
                                       <div class="first">
                                           <span>(学科:{{item.subject}} 题型: {{item.type}})</span>
                                       </div>
                                       <div class="second">
                                           <span title="上移">
                                               <img src="../../src/assets/img/welcome/up.png" alt="">
                                           </span>
                                           <span title="下移">
                                                <img src="../../src/assets/img/welcome/down.png" alt="">
                                           </span>
                                           <span title="删除">
                                                 <img src="../../src/assets/img/welcome/delete.png" alt="">
                                           </span>

                                       </div>

                                   </div>
                                   <div class="hr"></div>
                                </el-form-item>
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="">
                                    <el-button type="plain" class="add-btn" @click="chooseTopic()">
                                        <i class="el-icon-plus"></i>
                                        <span>添加试题</span>
                                    </el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="time-contain">

                            </el-col>
                        </el-row>
                        <el-row class="footer">
                            <el-col :span="16">
                                <el-form-item class="btn-group">
                                    <el-button type="primary">保存</el-button>
                                    <el-button>取消</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                    </el-form>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import Header from '../../src/components/Header'
import SideNav from '../../src/components/SideNav'
export default {
    name: 'home',
    data() {
        return {
            headerList: ['题库', '试卷', '新增试卷'],
            openeds: ['c2', 'c2-1'],
            activeTab: 'Tv',
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            arr: [{
                title: '试题1',
                content: '小明走了了100步，小王走了了3走了了3走了了3走了了3走了了3走了了3?',
                type: '单选'

            },
            {
                title: '试题2',
                content: '小明走了了100步，小王走了了3走了了3走了了3走了了3走了了3走了了3?',
                subject: '数学',
                type: '单选'

            }
            ]
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        },
        chooseCourse() {
            this.$router.push({
                path: '/chooseCourse' //跳转的路径
            })
        },
        chooseTopic() {
            this.$router.push({
                path: '/chooseTopic' //跳转的路径
            })
        }
    },
    components: {
        Header,
        SideNav
    }
}

</script>
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    html,
    body {
        height: 100%
    }

    .add-title {
        height: 70px;
        line-height: 70px;
        padding-left: 30px;

        img {
            height: 20px;
            width: 20px;
            position: relative;
            top: 4px;
            margin-right: 12px;
        }

        span {
            font-size: 20px;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
        }
    }
    .sub-name{
        position: relative;
        .link{
            position: absolute;
            top: 1px;
            left: 20px;
            text-decoration: none;
            color: rgba(85, 168, 253, 1);
            cursor: pointer;
        }
        input{
            padding-left: 84px;
        }
    }

    .add-form-container {
        width: calc(100% - 60px);
        margin: auto;
        border: 1px solid rgba(221, 223, 230, 1);

        .add-form {
            width: calc(100% - 105px);
            margin: auto;
            margin-top: 30px;
        }

        .el-select {
            width: 100%
        }
        .line2 {
            .flex(row, space-between, center, nowrap);
            .first{
                font-size:14px;
                font-family:PingFang-SC-Regular!important;
                font-weight:400;
                color:rgba(72,87,106, 0.5);
            }
            .second{
                /*width: 24%;*/
                margin-right: 4%;
                img{
                    height: 16px;
                    width: 16px;
                    margin-right: 16px;
                    cursor: pointer;
                }
            }
            margin-top: -12px;
        }
        .desc{
            height: 40px;
            line-height: 40px;
            font-size:14px;
            font-family:PingFang-SC-Regular!important;
            font-weight:400;
            color:rgba(96,98,102,1);
            margin-left: 16px;
            text-align: right;
            span{
                margin-right: 10px;
            }

        }
        .content{
            font-size:14px;
            font-family:PingFang-SC-Regular!important;
            font-weight:400;
            color:rgba(28,28,28,1);
        }
        .sub{
            .hr{
                background-color: rgba(232, 233, 234, 1);
                height: 2px;
                width: 100%;
                margin-top: 10px;
            }
        }
        .footer{
            margin-top: 70px;
        }
    }

</style>
<style lang="less">
    .left-container {
        ul {
            background-color: #22345E
        }
    }

    .btn-group {
        >div {
            text-align: center
        }
    }

    .date-line {
        text-align: center !important
    }

    // 下拉选
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #55a8fd !important;
        color: #ffffff !important;
    }

    .el-select-dropdown__list {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        font-size: 14px !important;
        font-family: PingFang-SC-Regular !important;
        font-weight: 400;
    }

    .popper__arrow {
        display: none !important;
    }

    // 日历
    .el-picker-panel__body {
        font-family:PingFang-SC-Regular!important;
    }
    .add-btn {
        width: 205px;
        height: 40px;
        border-radius: 4px;
        border: 1px solid rgba(85, 168, 253, 1);
        color: #55A8FD
    }
    .sub-name{
        input{
            padding-left: 84px!important;
        }
    }
    // 表单label
    .el-form  {
        /*.el-form-item__label{*/
        /*    font-size:14px!important;*/
        /*    font-family:PingFang-SC!important;*/
        /*    font-weight:400!important;*/
        /*    color:rgba(28,28,28,1)!important;*/
        /*}*/
    }
    @import url('../../src/assets/less/override-element-ui.less');

</style>
